<template>
    <div id="home">
      <div style="position: relative">
        <!--地图-->
        <div class="bannerBg">
        <div class="wrap">
          <div ref="container" style="width: 800px;height: 540px;margin-left: -70px;box-sizing: border-box;position:relative;top:-24px;">
          </div>
          <!--右边内容-->
          <div class="ccpp">
            <div class="wcity">
              <p style="text-align: center;font-size: 26px;font-weight: bold;color: #e22323" id="nntitle">各市活跃度综合指数</p>
              <table style="margin-top: 10px">
                <thead style="font-size: 20px;">
                <th>排名</th>
                <th id="nnname">城市名称</th>
                <th>统计数量</th>
                </thead>
                <tbody id="wcity" style="font-size: 18px;">
                <tr class="hovv" v-for="item in mapData1" :key="item.id" style="cursor: pointer;" @mouseover="overShow(item.name)" @mouseout="outHide">
                  <td>{{item.index}}</td>
                  <td class="ccity">{{item.name}}</td>
                  <td>{{item.value}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
        <!--弹框-->
        <div class="bbox" v-show="hshow">
          <!--标题-->
          <p style="color: white;background-color: #00b7ee;text-align: center;display: inline-block;padding: 2px 5px;">{{cityname}}专项监测</p>
          <ul>
            <li v-for="item in hData" :key="item.id" v-if="item.value">
              <span>{{item.name}}</span>
              :
              <span>{{item.value !== "" ? item.value:"--"}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!--工作动态和监测报告-->
      <!--<homechild1></homechild1>-->
      <homechild1></homechild1>
      <homechildAdd></homechildAdd>
      <homechild2></homechild2>
      <homechild3></homechild3>
      <homechild4></homechild4>
      <homechild5></homechild5>
    </div>
</template>

<script>
// import homechild1 from './homechild1.vue'
import homechildAdd from './homechildAdd.vue'
import homechild1 from './homechild1.vue'
import homechild2 from './homechild2.vue'
import homechild3 from './homechild3.vue'
import homechild4 from './homechild4.vue'
import homechild5 from './homechild5.vue'
export default {
  data () {
    return {
      cityname: '',
      mapData: [],
      mapData1: [],
      showData: [],
      geoCoordMap: {},
      option: null,
      myChart: '',
      timer: null,
      cityLength: null,
      cityLength1: 0,
      hoverNow: '',
      hData: [{name: '信用动态', value: ''},
        {name: '政策法规', value: ''},
        {name: '信息公示', value: ''},
        {name: '联合奖惩', value: ''},
        {name: '红名单', value: ''},
        {name: '黑名单', value: ''},
        {name: '政务诚信', value: ''},
        {name: '红黑名单', value: ''}
      ],
      hshow: false
    }
  },
  components: {
    homechildAdd: homechildAdd,
    homechild1: homechild1,
    homechild2: homechild2,
    homechild3: homechild3,
    homechild4: homechild4,
    homechild5: homechild5
  },
  mounted () {
    // 地图echarts初始化
    var dom = this.$refs.container
    this.myChart = window.echarts.init(dom)
    var convertData = function (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value).toFixed(0)
          })
        }
      }
      return res
    }
    function randomValue () {
      var index = Math.round(Math.random() * 2)
      var arr = [1000, 500, 0]
      return arr[index]
    }

    this.option = {
      //      title: {
      //        text: '全国受监测省市',
      //        left: 'center',
      //        textStyle: {
      //          color: '#e22323',
      //          fontSize: 26
      //        }
      //      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: [' ', 'Low'],
        seriesIndex: [2],
        inRange: {
          color: ['#abe1f3']
        },
        calculable: true,
        show: false
      },
      geo: {
        map: 'china',
        roam: false,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: 'rgba(0,0,0,0.4)'
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          emphasis: {
            areaColor: null,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(this.mapData),
          symbolSize: function (val) {
            return val[2] / 10
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ff8400'
            },
            z: 1000
          }
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(this.mapData.sort(function (a, b) {
            return b.value - a.value
          }).slice(0, 1)),
          symbolSize: function (val) {
            return val[2] / 10
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: false,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              //   跳动小点点
              color: 'red',
              shadowBlur: 1000,
              shadowColor: '#333',
              label: {
                show: true,
                textStyle: {
                  fontSize: 20
                }
              }
            }
          },
          zlevel: 1
        },
        {
          name: 'categoryA',
          type: 'map',
          geoIndex: 0,
          tooltip: {show: true},
          data: [
            {name: '北京', value: randomValue()},
            {name: '天津', value: randomValue()},
            {name: '上海', value: randomValue()},
            {name: '重庆', value: randomValue()},
            {name: '河北', value: randomValue()},
            {name: '河南', value: randomValue()},
            {name: '云南', value: randomValue()},
            {name: '辽宁', value: randomValue()},
            {name: '黑龙江', value: randomValue()},
            {name: '湖南', value: randomValue()},
            {name: '安徽', value: randomValue()},
            {name: '山东', value: randomValue()},
            {name: '新疆', value: randomValue()},
            {name: '江苏', value: randomValue()},
            {name: '浙江', value: randomValue()},
            {name: '江西', value: randomValue()},
            {name: '湖北', value: randomValue()},
            {name: '广西', value: randomValue()},
            {name: '甘肃', value: randomValue()},
            {name: '山西', value: randomValue()},
            {name: '内蒙古', value: randomValue()},
            {name: '陕西', value: randomValue()},
            {name: '吉林', value: randomValue()},
            {name: '福建', value: randomValue()},
            {name: '贵州', value: randomValue()},
            {name: '广东', value: randomValue()},
            {name: '青海', value: randomValue()},
            {name: '西藏', value: randomValue()},
            {name: '四川', value: randomValue()},
            {name: '宁夏', value: randomValue()},
            {name: '海南', value: randomValue()},
            {name: '台湾', value: randomValue()},
            {name: '香港', value: randomValue()},
            {name: '澳门', value: randomValue()},
            {name: '南海诸岛', value: randomValue()}
          ]
        }
      ]
    }
    this.myChart.setOption(this.option, false)
    this.getdata()
  },
  methods: {
    overShow (cityname) {
      clearInterval(this.timer)
      this.hoverData(cityname)
      this.cityname = cityname
      this.hshow = true
    },
    outHide () {
      var slef = this
      this.timer = setInterval(function () {
        slef.douCity()
      }, 2000)
      this.hshow = false
    },
    hoverData (cityname) {
      var self = this
      this.axios.post(this.api + '/monitor/dataCleanController/columTJInfo.do', this.qs.stringify({locName: cityname, type: 1})).then(res => {
        if (res.data.msg === 'success') {
          self.hData[0].value = res.data.data[0].xydt || ''
          self.hData[1].value = res.data.data[0].zcfg || ''
          self.hData[2].value = res.data.data[0].xxgs || ''
          self.hData[3].value = res.data.data[0].lhjc || ''
          self.hData[4].value = res.data.data[0].hongmd || ''
          self.hData[5].value = res.data.data[0].heimd || ''
          self.hData[6].value = res.data.data[0].zwcx || ''
          self.hData[7].value = res.data.data[0].hhmd || ''
        }
      })
    },
    dealNum (number) {
      if (number < 100 && number > 50) {
        return 100
      } else if (number < 50) {
        return 60
      } else {
        return number
      }
    },
    convertData (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    },
    getdata () {
      var self = this
      this.axios.post(this.api + '/monitor/dataCleanController/findCityDetect.do', this.qs.stringify({type: 1})).then(function (data) {
        var res = data.data
        if ((res.msg === 'success') && (res.data.length > 0)) {
          self.cityLength = res.data.length
          var max = res.data[0].count
          for (var i = 0; i < res.data.length; i++) {
            self.mapData.push({
              name: res.data[i].locName,
              value: self.dealNum(((res.data[i].count) / max) * 200)
            })
            self.showData.push({
              index: i + 1,
              name: res.data[i].locName,
              value: res.data[i].count
            })
            self.geoCoordMap[res.data[i].locName] = [res.data[i].JWD.jd, res.data[i].JWD.wd]
          }
          self.option.series[0].data = self.convertData(self.mapData)
          self.timer = setInterval(function () {
            self.douCity()
          }, 2000)
        }
      })
    },
    douCity () {
      if (this.cityLength1 > this.cityLength) {
        this.cityLength1 = 0
      } else {
        this.cityLength1++
      }
      this.mapData1 = this.showData.slice(this.cityLength1, this.cityLength1 + 5)
      this.option.series[1].data = this.convertData(this.mapData).slice(this.cityLength1, this.cityLength1 + 1)
      this.myChart.setOption(this.option, false)
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../css/home.css";
  .hovv:hover{
    color: #e22323 !important;
  }
  .bbox{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 280px;
    border: 2px solid #00b7ee;
    border-radius: 5px;
    background-color: white;
    li{display: flex;
      height: 30px;
      line-height: 30px;
      span{flex: 1;text-align: right;padding:0 30px}
      span:last-child{text-align: left;}
    }
  }
</style>
